<template>
  <el-form ref="formData"
           :inline="true"
           :model="formData"
           class="demo-form-inline">
    <el-form-item label="设备编号"
                  prop="devCode">
      <el-input v-model="formData.devCode"
                placeholder="请输入设备编号"></el-input>
    </el-form-item>
    <el-form-item label="是否在公司"
                  prop="inHome">
      <el-select v-model="formData.inHome"
                 clearable
                 placeholder="请选择是否在公司">
        <el-option v-for="item in isHomeOptions"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="设备状态"
                  prop="status">
      <el-select v-model="formData.status"
                 clearable
                 placeholder="请选择设备状态">
        <el-option v-for="item in statusOptions"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary"
                 icon="el-icon-search"
                 @click="search">查询</el-button>
      <el-button type="primary"
                 icon="el-icon-delete"
                 @click="reset('formData')">清除</el-button>
    </el-form-item>
    <el-form-item>
      <el-badge :value="exportsCounts"
                class="item">
        <i class="el-icon-download icon-size"
           @click="handleDownloadList"></i>
      </el-badge>
    </el-form-item>
    <DownloadDialog v-model="dialogVisible"
                    v-on="$listeners" />
  </el-form>
</template>

<script>
import DownloadDialog from "./DownloadDialog.vue"
import { mapState } from "vuex";

const ENTIRE_DATA = [
  { id: "", name: "全部" },
  { id: 0, name: "有效" },
  { id: 1, name: "已注销" }
] // 全部 => 状态

const EXIST_DATA = [
  { id: "", name: "全部" },
  { id: 0, name: "正常使用" },
  { id: 1, name: "闲置设备" }
] // 在公司 => 状态

const ABSENT_DATA = [
  { id: "", name: "全部" },
  { id: 0, name: "待回收" },
  { id: 1, name: "待催缴" }
] // 不在公司 => 状态

const IS_HOME_OPTIONS = [
  { id: 2, name: "全部" },
  { id: 1, name: "在公司" },
  { id: 0, name: "不在公司" }
]

export default {
  name: 'DtSearch',
  components: { DownloadDialog },
  props: {
    exportsCount: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      formData: {
        inHome: 2,
        status: ""
      },
      dialogVisible: false,
      isHomeOptions: IS_HOME_OPTIONS,
      defaultStatusList: []
    }
  },
  computed: {
    ...mapState({
      count: (state) => state.dtEquipment.exportsCount
    }),
    statusOptions () {
      const data = {
        0: ABSENT_DATA,
        1: EXIST_DATA,
        2: ENTIRE_DATA
      }
      return data[this.formData.inHome] || this.defaultStatusList
    },
    exportsCounts () {
      return this.exportsCount || this.count
    }
  },
  methods: {
    search () {
      this.$emit('search', this.formData)
    },
    reset (formName) {
      this.$refs[formName].resetFields();
    },
    handleDownloadList () {
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>
.icon-size {
  font-size: 22px;
  margin-left: 500px;
  cursor: pointer;
  padding: 2px;
  border: 2px solid var(--prev-border-color-grey);
  border-radius: 8px;
}
</style>